import React, {Component, PropTypes} from 'react';

import translate from '../../i10n/translate';
import {fullpageEnhance} from '../components/mixin/fullpageEnhance';
import Section, {FeatureSection} from '../components/section/Section.react';

import Footer from '../components/footer/Footer.react';

class TechnologySection extends Component {

    static propTypes = {
        image: PropTypes.string.isRequired,
        title: PropTypes.string.isRequired,
        slogan: PropTypes.string.isRequired
    };

    static defaultProps = {
        image: 'images/background/01_01.jpg',
        title: translate('technology'),
        slogan: translate('slogan')
    };

    render() {
        const {image, title, slogan} = this.props;

        return <Section backgroundImage={image} className="technology-section">
            <h2 className="title">
                {title}
            </h2>
            <p className="describe">
                {slogan}
            </p>
        </Section>;
    }
}

export class StopwatchSection extends Component {

    static propTypes = {
        image: PropTypes.string.isRequired,
        title: PropTypes.string.isRequired,
        describe: PropTypes.string.isRequired,
        features: PropTypes.array.isRequired
    };

    static defaultProps = {
        title: translate('stopwatch.title'),
        describe: translate('stopwatch.desc'),
        image: 'images/background/01_02.jpg',
        features: [
            translate('stopwatch.features.collect'),
            translate('stopwatch.features.upload'),
            translate('stopwatch.features.share'),
            translate('stopwatch.features.design')
        ]
    };

    render() {
        const {title, describe, image, features} = this.props;

        let featureItems = features.map((feature, index) => {
            return <li key={index+ 1}>{feature}</li>;
        });

        return <Section className="stopwatch-section" backgroundImage={image}>
            <h2 className="title" dangerouslySetInnerHTML={{__html:title}}/>
            <p className="describe">{describe}</p>
            <ul className="features">
                {featureItems}
            </ul>
        </Section>;
    }
}


export class AppSection extends Component {

    static propTypes = {
        image: PropTypes.string.isRequired,
        title: PropTypes.string.isRequired,
        describe: PropTypes.string.isRequired,
        align: PropTypes.string.isRequired,
        features: PropTypes.array.isRequired
    };

    static defaultProps = {
        title: translate('app.title'),
        describe: translate('app.desc'),
        align: 'left',
        image: 'images/background/01_03.png',
        size: {
            width: 362,
            height: 797
        },
        features: [
            translate('app.features.show'),
            translate('app.features.appointment'),
            translate('app.features.rewards'),
            translate('app.features.ability')
        ]
    };

    render() {
        const {title, describe, image, size, features, align} = this.props;

        let featureItems = features.map((feature, index) => {
            return <li key={index+ 1}>{feature}</li>;
        });

        return <FeatureSection className="app-section" {...this.props}>
            <h2 className="title">{title}</h2>
            <p className="describe">{describe}</p>
            <ul className="features">
                {featureItems}
            </ul>
            {this.props.children}
        </FeatureSection>
    }
}

class CompanySection extends Component {

    static propTypes = {
        title: PropTypes.string.isRequired,
        describe: PropTypes.string.isRequired,
        features: PropTypes.array.isRequired,
        courses: PropTypes.object.isRequired,
        image: PropTypes.string.isRequired
    };

    static defaultProps = {
        title: translate('company.title'),
        describe: translate('company.desc'),
        image: 'images/background/01_04.jpg',
        features: [
            translate('company.features.ideals'),
            translate('company.features.target'),
            translate('company.features.mission')
        ],
        courses: {
            title: translate('company.course.title'),
            process: [
                translate('company.course.process1'),
                translate('company.course.process2')
            ]
        }
    };

    render() {
        const {image, title, describe, features, courses} = this.props;

        let featureItems = features.map((feature, index) => {
            return <li key={index+ 1}>{feature}</li>;
        });

        let courseItems = courses.process.map((course, index) => {
            return <dd key={index+ 1}>{course}</dd>;
        });

        return <Section className="company-section" backgroundImage={image}>
            <h2 className="title">{title}</h2>
            <p className="describe">{describe}</p>
            <ul className="features tx-white">
                {featureItems}
            </ul>
            <dl>
                <dt>{courses.title}</dt>
                {courseItems}
            </dl>
        </Section>;
    }
}


class LeaderSection extends Component {

    static propTypes = {
        image: PropTypes.string.isRequired,
        title: PropTypes.string.isRequired,
        name: PropTypes.string.isRequired,
        describe: PropTypes.string.isRequired
    };

    static defaultProps = {
        image: 'images/background/01_05.jpg',
        title: translate('leader.title'),
        name: translate('leader.name'),
        describe: translate('leader.desc')
    };

    render() {
        const {image, title, name, describe} = this.props;

        return <Section className="leader-section" backgroundImage={image}>
            <h2 className="title">{title}</h2>
            <h4 className="sub-title">{name}</h4>
            <p className="describe">{describe}</p>
        </Section>
    }
}

@fullpageEnhance
export default class Home extends Component {
    render() {
        return <div ref="fullpage"> 
            <TechnologySection />
            <StopwatchSection />
            <AppSection/>
            <CompanySection />
            <LeaderSection />
            <Footer />
        </div>
    }
}